/*
      1.stop 一个可执行的函数用来停止监听行为
      2.target 通过ref获取要监控的元素或组件
      3.isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
      特别注意: 调用useIntersectionObserver(要监控的元素DOM对象或组件实例, 监控的回调函数)=》多次触发
    */
import { ref, onUnmounted, computed } from 'vue'
import dayjs from 'dayjs'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
export function useObserve (apiFn) {
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    // 参数一:被监控的元素或组件
    target,
    // 参数二:进入可视区域的回调
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        // console.log(isIntersecting)
        // 进入可视区域时调用
        apiFn()
        // 注意：发送完，立即关闭监听=》避免多次发送
        stop()
      }
    },
    // 参数三:进入当前元素多少开始执行回调
    // 进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
    { threshold: 0 }
  )
  return { target }
}

// 倒计时
/**
 *
 * @param {*} time 倒计时的秒数
 * @returns
 */
export function useCountDown (time) {
  const countTime = ref(0)

  // 计算属性基于现在的countTime做一个转换处理
  const countTimeText = computed(() => {
    // 完成转换逻辑
    return dayjs.unix(countTime.value).format('mm分ss秒')
  })

  const { pause, resume } = useIntervalFn(() => {
    /* your function */
    // 自减逻辑
    countTime.value--
    // 到零停止
    if (countTime.value <= 0) {
      pause()
    }
  }, 1000, { immediate: false })

  // 开始计时方法
  function start (tm) {
    if (countTime.value === 0) {
      countTime.value = time || tm
    }
    resume()
  }

  // 清理一下定时器
  // 组件的卸载之后
  onUnmounted(() => {
    pause()
  })

  // console.log(pause, resume, isActive)
  return { countTime, start, pause, countTimeText }
}
